<template>
  <div id="map">
    <baidu-map :mapStyle="mapStyle"
               class="map"
               center="上海"
               ak="TdjjUm3DDvXztsh31KKjogByHtfBVfAw"
               mapType="BMAP_NORMAL_MAP"
               :scroll-wheel-zoom="true"
               :zoom="zoom"
               @load="lod()">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP', 'BMAP_PERSPECTIVE_MAP', 'BMAP_SATELLITE_MAP']"
                   anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <div v-for="(position, index) in positions"
           :key="index"
           class="qq">
        <bm-marker :position="{lng:position.lng,lat:position.lat}"
                   :icon="{url: require('../assets/img/室内@2x.png'), size: {width: 50, height: 50}}"></bm-marker>
      </div>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMapType, BmMarker } from 'vue-baidu-map'
export default {
  name: 'MyMap',
  props: ['positions'],
  components: {
    BaiduMap,
    BmMarker,
    BmMapType
  },
  data () {
    return {
      zoom: 10,
      mapStyle: {
        styleJson: [
          {
            featureType: 'land',
            elementType: 'geometry',
            stylers: {
              color: '#ffffff'
            }
          },
          {
            featureType: 'water',
            elementType: 'geometry',
            stylers: {
              color: '#A3D2FF'
            }
          },
          {
            featureType: 'railway',
            elementType: 'geometry',
            stylers: {
              color: '#A3D2FF'
            }
          },
          {
            featureType: 'local',
            elementType: 'geometry',
            stylers: {
              color: '#A3D2FF'
            }
          },
          {
            featureType: 'manmade',
            elementType: 'geometry',
            stylers: {
              color: '#A3D2FF'
            }
          },
          {
            featureType: 'building',
            elementType: 'geometry',
            stylers: {
              color: '#A3D2FF'
            }
          }
        ]
      }
    }
  },
  methods: {
    lod () {
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      this.bwidth = oWidth * 60 / 1920
      this.bheight = oWidth * 60 / 1920
    },
    addZoom (index) {
      this.zoom += index
      if (this.zoom > 19) {
        this.zoom = 19
      }
      if (this.zoom < 3) {
        this.zoom = 3
      }
    },
    render () {
      var Markers = Array.from(document.getElementsByClassName('BMap_Marker BMap_noprint'))
      var Mlength = Markers.length
      for (var i = 0; i < Mlength; i++) {
        var y1 = Markers[i].offsetTop
        var x1 = Markers[i].offsetLeft
        for (var j = 0; j < i; j++) {
          var y2 = Markers[j].offsetTop
          var x2 = Markers[j].offsetLeft
          var df = Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)
          if (df <= Math.pow(25, 2)) {
            // console.log(df)
          }
        }
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.render()
    }, 1000)
  }
}
</script>

<style scoped>
#map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}
.map {
  width: 100%;
  height: 100%;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}
</style>
